<template>
  <div>
    <Header hide-sign="true"></Header>
    <div style="max-width: 800px;margin:60px auto auto auto;box-shadow:0 0 10px 10px rgba(0,0,0,0.15);overflow: hidden;">
      <el-row id="container" style="height: 500px">
        <el-col class="left-over" :span="12">
          <el-row class="left-container" style="width: 200%">
            <el-col :span="12">
              <div style="width: 70%;margin:100px auto auto auto">
                <div style="font-size: 30px;margin-bottom: 40px;text-align: center;font-weight: bold">
                  登 录
                </div>
                <el-row style="margin-bottom: 30px">
                  <el-col :span="24">
                    <el-input v-model="user.username" placeholder="用户名" maxlength="10"></el-input>
                  </el-col>
                </el-row>

                <el-row style="margin-bottom: 30px">
                  <el-col :span="24">
                    <el-input v-model="user.password" placeholder="密码" type="password" maxlength="10"></el-input>
                  </el-col>
                </el-row>

                <div class="mybtn" @click="login()">
                  登 录
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="width: 70%;margin:60px auto auto auto">
                <div style="text-align: center;font-size: 30px;">
                  &nbsp;已 有 帐 号？
                </div>
                <div style=" border-top: 1px solid rgba(255, 255, 255 ,0.4);margin-bottom: 40px;margin-top: 40px"></div>
                <div style="text-align: center; letter-spacing: 3px;margin-bottom: 25px">
                  请使用您的账号进行登录
                </div>
                <div style="text-align: center; letter-spacing: 3px;margin-bottom: 25px">
                  在知识的海洋中
                </div>
                <div style="text-align: center; letter-spacing: 3px;margin-bottom: 65px">
                  和我们一起开始旅程吧
                </div>
                <div class="mygreenbtn" @click="switchLeft()">
                  去登录
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="right-over" :span="12">
          <div class="right-container" style="padding-top: 100px">
            <div style="margin:auto;width: 70%;height: 500px">
              <div style="text-align: center;font-size: 30px;">
                &nbsp;没 有 帐 号？
              </div>
              <div style=" border-top: 1px solid rgba(255, 255, 255 ,0.4);margin-bottom: 30px;margin-top: 30px"></div>
              <div style="text-align: center; letter-spacing: 3px;margin-bottom: 20px">
                立即注册加入我们
              </div>
              <div style="text-align: center; letter-spacing: 3px;margin-bottom: 58px">
                和我们一起开始旅程吧
              </div>
              <div class="mygreenbtn" @click="switchRight()">
                去注册
              </div>
            </div>
            <div style="margin:20px auto auto auto;width: 70%;height: 500px">
              <div style="font-size: 30px;margin-bottom: 20px;text-align: center;font-weight: bold">
                注 册
              </div>
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <el-input v-model="user.username" placeholder="用户名" maxlength="20"></el-input>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <el-input v-model="user.email" placeholder="邮箱" maxlength="20"></el-input>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <el-input v-model="user.password" placeholder="密码" type="password" maxlength="20"></el-input>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <el-input v-model="user.password2" placeholder="确认密码" type="password" maxlength="20"></el-input>
                </el-col>
              </el-row>

              <div class="mybtn" @click="register()">
                注 册
              </div>

            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Cookies from "js-cookie";
const md5 = require("md5")

export default {
  name: "User",
  components: {Header},
  data(){
    return {
      user:{
        username:null,
        password:null,
        password2:null,
        email:null,
      },
      is_register:this.$route.query.is_register
    }
  },
  mounted() {
    if(this.is_register){
      this.switchRight()
    }
  },
  methods:{
    switchRight(){
      let container = document.getElementById("container")
      container.classList.add('active')
    },
    switchLeft(){
      let container = document.getElementById("container")
      container.classList.remove('active')

    },
    login(){
      if(this.user.username == null){
        this.$notify.error({
          title: '错误',
          message: '用户名不能为空'
        });
        return
      }
      if(this.user.password == null){
        this.$notify.error({
          title: '错误',
          message: '密码不能为空'
        });
        return
      }
      this.$axios.post('user/login/',{
        username:this.user.username,
        password:md5(this.user.password),
      }).then(res=>{
        if(res.status === 200){
          this.$notify({
            title: '成功',
            message: '登录成功',
            type: 'success'
          });
          localStorage.setItem("token",res.data)
          localStorage.setItem("username",this.user.username)
          this.$router.push("/")
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data
          });
          return
        }
      }).catch(err=>{
        this.$notify.error({
          title: '错误',
          message: "登录错误"
        });
      })
    },
    register(){
      if(this.user.username == null){
        this.$notify.error({
          title: '错误',
          message: '用户名不能为空'
        });
        return
      }else{
        const user_reg = /^[a-z][a-z\d_]{2,19}$/
        if(!user_reg.test(this.user.username)){
          this.$notify.error({
            title: '错误',
            message: '用户名只能是英文、下划线、数字，且第一个字母不能是下划线和数字，长度在3~19之间'
          });
          return
        }
      }
      if(this.user.email == null){
        this.$notify.error({
          title: '错误',
          message: '邮箱不能为空'
        });
        return
      }else{
        const mal_reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
        if(!mal_reg.test(this.user.email)){
          this.$notify.error({
            title: '错误',
            message: '邮箱格式不正确'
          });
          return
        }
      }

      if(this.user.password == null){
        this.$notify.error({
          title: '错误',
          message: '密码不能为空'
        });
        return
      }

      if(this.user.password !== this.user.password2){
        this.$notify.error({
          title: '错误',
          message: '两次密码不一致'
        });
        return
      }
      console.log(md5(this.user.password),md5(this.user.password).length)
      this.$axios.post("user/register/",
          {
            username:this.user.username,
            password:md5(this.user.password),
            email:this.user.email
          }
      ).then(res=>{
        console.log(res)
        if(res.status === 200){
          this.$notify({
            title: '成功',
            message: '注册成功',
            type: 'success'
          });
          this.switchLeft()
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data
          });
        }
      }).catch(err=>{
        this.$notify.error({
          title: '错误',
          message: "出现错误"
        });
      })
    }
  }
}
</script>

<style scoped>
.mybtn{
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background: #333333;
  color: white;
  padding: 13px 35px;
  transition: all 0.3s;
  width: fit-content;
  margin: auto;
}
.mybtn:hover{
  background: #9dc15b;
  color: #333333;
  transition: all 0.3s;
  cursor: pointer;
}

.mygreenbtn{
  letter-spacing: 5px;
  font-size: 18px;
  font-weight: bold;
  background: #9dc15b;
  color: #333333;
  padding: 13px 40px;
  transition: all 0.3s;
  text-align: center;
  width: fit-content;
  margin: auto;
}
.mygreenbtn:hover{
  background: white;
  color: #9dc15b;
  transition: all 0.3s;
  cursor: pointer;
}
.left-container{
  transition: transform .6s ease-in-out;
}
.right-container{
  transition: transform .6s ease-in-out;
}
.active .left-container{
  transform: translateX(-50%);
}
.active .right-container{
  transform: translateY(-50%);
}
.left-over{
  transition: all .6s ease-in-out;
  background-color: white;
  height: 100%;
  overflow: hidden;
}
.right-over{
  transition: all .6s ease-in-out;
  background-color: #333333;
  overflow: hidden;
  height: 100%;
  color: white;
}
.active .left-over{
  background-color: #333333;
  color: white;
}
.active .right-over{
  background-color: white;
  color: black;
}
</style>